import { Outlet, useLocation } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { toggleDarkMode } from '../stores/dark'
import { Button, Menu } from 'antd'
import { AppstoreOutlined, ContainerOutlined, DesktopOutlined, MailOutlined, PieChartOutlined } from '@ant-design/icons'
import { router } from '../router/router'
import { useNavigate, NavLink } from 'react-router-dom'
import { useEffect, useState } from 'react'

export default function LayOut() {
  const darkMode = useSelector(state => state.darkSlice.darkMode)
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const handleToggle = () => {
    dispatch(toggleDarkMode(!darkMode))
  }
  const filteredTeacherRoutes = router.routes
    .filter(route => route.children && route.children.some(child => child.meta?.role === 'teacher'))
    .flatMap(route => route.children)
    .filter(route => route.meta?.role === 'teacher');

  const location = useLocation();
  const [activeLink, setActiveLink] = useState(location.pathname);
  useEffect(() => {
    setActiveLink(location.pathname);
  }, [location]);

  return (
    <div className={`${darkMode ? "dark" : ''}`}>
      <div className='flex'>
        <aside className='w-[20%] h-screen dark:bg-slate-800'>
          <div className='w-full h-[100px] bg-slate-500 text-center leading-[100px]'>icon图标</div>
          <div>
            {
              filteredTeacherRoutes?.map(item => {
                const isActive = activeLink === `/index/${item.path}`;
                const linkStyle = {
                  display:'block',
                  width: '100%',
                  height: '100%',
                  color: isActive ? '#4e7dfe' : 'inherit',
                  // fontWeight: isActive ? 'bold' : 'normal',
                  borderRight:isActive ? '4px solid #4e7dfe' : '',
                  backgroundColor: isActive ? '#eef2ff' : 'transparent',
                };
                return (
                  <div key={item.path} className='w-full h-[50px] text-center leading-[50px]'>
                    <NavLink
                      to={`/index/${item.path}`}
                      style={linkStyle}
                      className={isActive ? 'active' : ''}
                    >
                      {item.meta.title}
                    </NavLink>
                  </div>
                );
              })
            }
          </div>
        </aside>
        <div className='w-[100%] flex flex-col'>
          <header className='w-[100%] h-[100px] bg-white'>
            <Button onClick={handleToggle} color="primary" variant="solid">切换</Button>
          </header>
          <div className='w-[100%] h-[100%] bg-[#e5e7e8] dark:bg-black dark:text-white'>
            <Outlet></Outlet>
          </div>
        </div>
      </div>
    </div>

  )
}
